<template>
  <AppLayout>
    <div class="container">
      <XtxBread>
        <XtxBreadItem path="/">首页</XtxBreadItem>
        <XtxBreadItem path="/">{{
          subcategoryData.topCategory?.name
        }}</XtxBreadItem>
        <transition name="fade-right" mode="out-in">
          <XtxBreadItem>{{ subcategoryData.subcategory?.name }}</XtxBreadItem>
        </transition>
      </XtxBread>

      <SubFilter @onFilterChanged="updateReqParams" />

      <!--排序组件-->
      <div class="goods-list">
        <SubSort @onSortChanged="updateReqParams" />
        <GoodsList :goods="goodsList.items" v-if="goodsList" />
        <!-- 无限列表加载组件-->
        <XtxInfiniteLoading
          @infinite="loadMore"
          :loading="loading"
          :finished="finished"
        />
      </div>
    </div>
  </AppLayout>
</template>

<script>
import AppLayout from "@/components/AppLayout";
import { useStore } from "vuex";
import { onBeforeRouteUpdate, useRoute } from "vue-router";
import { computed, ref, watch } from "vue";
import XtxBreadItem from "@/components/library/XtxBreadItem";
import SubFilter from "@/views/categroy/components/SubFilter";
import SubSort from "@/views/categroy/components/SubSort";
import GoodsList from "@/views/categroy/components/GoodsList";
import { getGoodsList } from "@/api/categroy";
import XtxInfiniteLoading from "@/components/library/XtxInfiniteLoading";

export default {
  name: "SubCategoryPage",
  components: {
    XtxInfiniteLoading,
    GoodsList,
    SubSort,
    SubFilter,
    XtxBreadItem,
    AppLayout,
  },
  setup() {
    const { list: subcategoryData } = useBread();
    const { goodsList, loadMore, updateReqParams, loading, finished } =
      useGoods();

    return {
      subcategoryData,
      goodsList,
      updateReqParams,
      loading,
      finished,
      loadMore,
    };
  },
};

function useBread() {
  // 获取 store对象
  const store = useStore();

  // 获取route对象
  const route = useRoute();

  const list = computed(() => {
    const result = {};
    store.state.category.list.forEach((topCategory) => {
      topCategory.children?.forEach((subCategory) => {
        if (subCategory.id === route.params.id) {
          result.topCategory = {
            name: topCategory.name,
            id: topCategory.id,
          };
          result.subcategory = {
            name: subCategory.name,
            id: subCategory.id,
          };
        }
      });
    });
    return result;
  });

  return {
    list,
  };
}

function useGoods() {
  // 记载状态
  const loading = ref(false);
  // 数据是否已经加载完成
  const finished = ref(false);
  // 获取路由信息对象
  const route = useRoute();
  // 储存参数
  const reqParams = ref({
    categoryId: route.params.id,
    // 当前页
    page: 1,
    // 每次请求获取的数据条数
    pageSize: 5,
  });
  // 存储数据
  const goodsList = ref();
  // 获取数据
  const getData = () => {
    // 加载状态中
    loading.value = true;
    getGoodsList(reqParams.value).then((data) => {
      console.log(data);
      // 如果是第一页
      if (reqParams.value.page === 1) {
        // 就直接赋值
        goodsList.value = data.result;
      } else {
        // 如果不是第一页,就将商品数据累加
        goodsList.value = {
          ...goodsList.value,
          items: [...goodsList.value.items, ...data.result.items],
        };
      }
      // 如果当前页是最后一页
      if (reqParams.value.page >= data.result.pages) {
        // 所有数据已经加载完成
        finished.value = true;
      }
      // 加载完成
      loading.value = false;
    });
  };
  // 加载更多 加一页码
  const loadMore = () => {
    reqParams.value = {
      ...reqParams.value,
      page: reqParams.value.page + 1,
    };
  };
  watch(
    // 监听变化
    () => reqParams.value,
    () => {
      getData();
    },
    {
      // 初始默认执行一次
      immediate: true,
    }
  );
  // 监听路由变化
  onBeforeRouteUpdate((to) => {
    reqParams.value = {
      // 最新的路由参数
      categoryId: to.params.id,
      // 路由变化后 从第一页开始
      page: 1,
    };
  });
  // 更新请求参数
  const updateReqParams = (target) => {
    // 更新请求参数 每次从第一页开始
    reqParams.value = { ...reqParams.value, ...target, page: 1 };

    if (goodsList.value.items === []) {
      // 所有数据已经加载完成
      finished.value = true;
    } else {
      finished.value = false;
    }
  };
  return {
    goodsList,
    getData,
    updateReqParams,
    loading,
    finished,
    loadMore,
  };
}
</script>
<style scoped lang="less">
.goods-list {
  background: #fff;
  padding: 0 25px;
  margin-top: 25px;
}
</style>
